<script setup>
  // 导入定义好的 Store
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import Tabbar from '@/components/TabbarCustom.vue'
  import { useUsercodeStore } from '@/store/usercode.js'

  // 轮播图
  const info = ref()
  const modeIndex = ref(1)
  const styleIndex = ref(1)
  const dotsStyles = ref({
    backgroundColor: '#fff',
    border: 'none',
    color: '#fff',
    selectedBackgroundColor: '#000',
    selectedBorder: 'none',
    width: '3',
    height: '3',
  })
  const swiperDotIndex = ref(0)
  const current = ref(0)
  const mode = ref('dot')
  const rank_open = ref(false)
  function change(e) {
    current.value = e.detail.current
  }

  function clickItem(e) {
    swiperDotIndex.value = e
  }

  function bannerGo(url) {
    console.log('zou')
    uni.navigateTo({
      url,
    })
  }

  function onBanner(index) {
    console.log(22222, index)
  }

  // 去搜索
  function goSearch() {
    uni.navigateTo({
      url: `/homePage/searchgoods/index`,
    })
  }

  // 拉新
  function goRecommendation() {
    const shebei = ref(process.env.VUE_APP_PLATFORM)
    console.log(shebei)
    if (shebei.value == 'mp-weixin') {
      uni.navigateTo({
        url: `/minePage/invite/index`,
      })
    } else {
      wx.showModal({
        title: '温馨提示',
        content: '拉新功能请前往小程序操作，微信搜索 欧魂online 小程序',
        showCancel: false,
        confirmText: '我知道了',
        success: function (res) {
          if (res.confirm) {
            //下载新版本，并重新应用
          }
        },
      })
    }
  }

  // 今日上新
  function goActivity() {
    uni.navigateTo({
      url: `/homePage/activity/index`,
    })
  }
  function goOtherWechat() {
    wx.navigateToMiniProgram({
      appId: 'wx1b72263f91db6ecd',
      path: 'pages/home/index',
      success(res) {
        // 打开成功
        console.log('跳转小程序成功!', res)
      },
    })
  }
  function goOtherWechat2() {
    // 跳转欧到底
    wx.navigateToMiniProgram({
      appId: 'wx4761bcb230102f0a',
      path: 'pages/home/index',
      success(res) {
        // 打开成功
        console.log('跳转小程序成功!', res)
      },
    })
  }
  // function goActivity() {
  //   uni.navigateTo({
  //     url: `/homePage/blind/index`,
  //   })
  // }
  // 今日上新
  function goBlindBox() {
    uni.navigateTo({
      url: `/homePage/blind/index`,
    })
    // uni.navigateTo({
    //   url: `/homePage/activity/index`,
    // })
  }
  function goRanking() {
    uni.navigateTo({
      url: `/homePage/rank/index`,
    })
    // uni.navigateTo({
    //   url: `/homePage/activity/index`,
    // })
  }
  // 万众期待
  function goExpectation() {
    uni.navigateTo({
      url: `/homePage/expectation/index`,
    })
  }

  // 签到
  function goSignIn() {
    uni.navigateTo({
      url: `/homePage/signin/index`,
    })
  }

  // 去合成
  function goMerge() {
    uni.navigateTo({
      url: '/mergePage/merge/index',
    })
  }

  // 商城分类
  const category = ref()

  function toMall(id) {
    uni.navigateTo({
      url: `/homePage/mall/index?id=${id}`,
    })
  }

  //去战令
  function toWar() {
    uni.navigateTo({
      url: `/homePage/war/index`,
    })
  }

  // 去交易
  function toTransaction(type) {
    // uni.utils.toast('内测期间暂未开放')
    uni.navigateTo({
      url: `/transactionPage/transaction/index?type=${type}`,
    })
  }

  //商品
  const goodsList = ref()
  async function hope(id) {
    const res = await http.request({
      url: '/api/goods/scPost',
      method: 'POST',
      data: {
        id: id,
        type: '1',
      },
    })
    if (res.st == 1) {
      goodsList.value.forEach((item) => {
        if (item.id == id) {
          if (item.is_sc == 1) {
            --item.sc_num
            item.is_sc = 0
          } else if (item.is_sc == 0) {
            ++item.sc_num
            item.is_sc = 1
          }
        }
        console.log(item)
      })
      uni.showToast({
        title: '操作成功',
        duration: 2000,
      })
    } else {
      uni.showToast({
        title: '操作失败',
        icon: 'error',
        duration: 2000,
      })
    }
  }
  // 去看商品详情
  function goMallInfo(id) {
    uni.navigateTo({
      url: `/homePage/goodsinfo/index?id=${id}`,
    })
  }

  async function getInfo() {
    const res = await http.request({
      url: '/api/index/indexData',
      method: 'POST',
      data: {},
    })
    info.value = res.data.banner
    category.value = res.data.goods_class
    goodsList.value = res.data.goods
    // if (res.data.address_status == 1) {
    //   uni.utils.toast('背包商品即将自动发货，请填写地址。')
    //   setTimeout(() => {
    //     uni.navigateTo({
    //       url: `/minePage/editaddress/index`,
    //     })
    //   }, 2000)
    // }
  }

  // function toPage() {
  //   if (showObj.value.length > 0)
  //     uni.navigateTo({
  //       url: showObj.value[0].url,
  //     })
  // }
  //填写登录地址
  const titlepopup = ref()
  //隐藏接口
  // const hidding = ref(true)

  // function hidePart() {
  //   const userCodeStore = useUsercodeStore()
  //   if (userCodeStore.usercode.mobile == '18254076917') {
  //     hidding.value = false
  //   } else {
  //     hidding.value = true
  //   }
  // }

  onLoad((options) => {
    if (options.pid) {
      uni.setStorageSync('pid', options.pid)
    }
    if (options.scene) {
      // console.log(options.scene)
      uni.setStorageSync('pid', options.scene)
    }
  })

  onMounted(() => {
    // if (
    // 	userCodeStore.usercode.userId != '' &&
    // 	userCodeStore.usercode.token != '' &&
    // 	userCodeStore.usercode.isAddress == 0
    // ) {
    // 	return
    // }
  })
  function getScene(scene = '') {
    if (scene == '') return {}
    let res = {}
    let params = decodeURIComponent(scene).split('&')
    params.forEach((item) => {
      let pram = item.split('=')
      res[pram[0]] = pram[1]
    })
    return res
  }
  async function getRank() {
    const res = await http.request({
      url: '/api/index/rankinglist',
      method: 'POST',
      data: {},
    })
    if (res.st == 1) {
      rank_open.value = true
    } else {
      rank_open.value = false
    }
  }
  const updateMask = ref(false)
  onShow(() => {
    const accountInfo = uni.getAccountInfoSync()
    const appid = accountInfo.miniProgram.appId
    if (appid == 'wx76247eb634bbeab7') {
      updateMask.value = true
    }
    const userCodeStore = useUsercodeStore()
    // uni.hideTabBar()
    if (userCodeStore.usercode.token) {
      // getRank()
    }
    // hidePart()
    getInfo()
  })
</script>

<template>
  <view class="content">
    <view class="updateMask" v-if="updateMask">
      <image
        @click="goOtherWechat2"
        style="width: 600rpx; margin-left: 75rpx; margin-top: 150rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/update.png"
        mode="widthFix"
      ></image>
    </view>
    <!-- <uni-search-bar
			class="uni-mt-10"
			radius="28"
			placeholder="搜索..."
			clearButton="none"
			cancelButton="none"
			bgColor="#ECEDEE"
			@focus="goSearch"
		/> -->
    <!-- <view class="search-bar" @click="goSearch"> </view> -->
    <!-- 轮播图 -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="info"
      :current="current"
      :mode="mode"
      :dots-styles="dotsStyles"
      field="content"
    >
      <swiper
        class="swiper-box"
        @change="change"
        :current="swiperDotIndex"
        autoplay="true"
      >
        <swiper-item v-for="(item, index) in info" :key="index">
          <!-- <view class="swiper-item" :class="'swiper-item' + index">
						<text style="color: #fff; font-size: 32px">{{
							index + 1
						}}</text>
					</view> -->
          <image
            style="height: 570rpx; width: 100%; border-radius: 10rpx"
            :src="item.img"
            @click="bannerGo(item.url)"
          ></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <!-- 分类 -->
    <view class="category">
      <view
        class="category-item"
        v-for="item in category"
        :key="item.id"
        @click="toMall(item.id)"
      >
        <image
          :src="item.img"
          style="width: 80rpx; height: 80rpx; margin-bottom: 16rpx"
        ></image>
        <text>{{ item.class_name }}</text>
      </view>

      <view class="category-item" @click="toMall(0)">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/all.png"
          style="width: 80rpx; height: 80rpx; margin-bottom: 16rpx"
        ></image>
        <text>全部</text>
      </view>
    </view>

    <!-- 玩 -->
    <view class="play">
      <view>
        <image
          class="play-item"
          src="../../static/left.png"
          @click="goMerge"
        ></image>
      </view>
      <view>
        <image
          class="play-center-item"
          src="../../static/center.png"
          @click="toTransaction('in')"
        ></image>
      </view>
      <view>
        <image
          class="play-item"
          src="../../static/right.png"
          @click="toTransaction('out')"
        ></image>
      </view>
    </view>
    <!-- 功能 -->
    <!--  -->
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular="true"
        autoplay="true"
        interval="2000"
        duration="500"
        previous-margin="0px"
        next-margin="440rpx"
      >
        <swiper-item class="swiper-itemnew">
          <view class="charts-item bgColor1" @click="goBlindBox" style="">
            <text style="margin-bottom: 20rpx">吾魂</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/ball/ball2.gif"
              style="width: 128rpx; height: 128rpx"
            >
            </image>
          </view>
        </swiper-item>

        <swiper-item class="swiper-itemnew">
          <view class="charts-item bgColor2" @click="goRecommendation">
            <text style="margin-bottom: 20rpx">拉新</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/wow5.gif"
              style="width: 88rpx; height: 88rpx"
            >
            </image>
          </view>
        </swiper-item>
        <swiper-item class="swiper-itemnew">
          <view
            class="charts-item bgColorWechact"
            @click="goOtherWechat"
            style=""
          >
            <image
              style="
                width: 72rpx;
                height: 32rpx;
                position: absolute;
                top: 0;
                left: 0;
              "
              src="../../static/changwan.png"
              mode=""
            ></image>
            <text style="margin-bottom: 20rpx">畅玩</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/refresh-ouhun.gif"
              style="width: 88rpx; height: 88rpx"
            >
            </image>
          </view>
        </swiper-item>
        <swiper-item class="swiper-itemnew">
          <view class="charts-item bgColor5" @click="goRanking">
            <text style="margin-bottom: 20rpx">排行</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/rank.gif"
              style="width: 88rpx; height: 88rpx"
            >
            </image>
          </view>
        </swiper-item>
        <swiper-item class="swiper-itemnew">
          <view class="charts-item bgColor3" @click="goActivity">
            <text style="margin-bottom: 20rpx">活动</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/activenew.gif"
              style="width: 88rpx; height: 88rpx"
            >
            </image>
          </view>
        </swiper-item>
        <swiper-item class="swiper-itemnew">
          <view class="charts-item bgColor4" @click="goSignIn">
            <text style="margin-bottom: 20rpx; padding-left: 20rpx">签到</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/qiandao.gif"
              style="width: 80rpx; height: 80rpx"
            >
            </image>
          </view>
        </swiper-item>
        <!--    <swiper-item class="swiper-itemnew">
          <view class="charts-item bgColor5" @click="toWar" v-if="hidding">
            <text style="margin-bottom: 22rpx">战令</text>
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/zhanling.gif"
              style="width: 92rpx; height: 92rpx"
            >
            </image>
          </view>
        </swiper-item> -->
      </swiper>
    </view>
    <!--  -->

    <!-- 商品 -->
    <view class="goodslist">
      <view
        class="goodslist-item"
        v-for="item in goodsList"
        :key="item.id"
        @click="goMallInfo(item.id)"
      >
        <view class="" style="position: relative">
          <image
            :src="item.img"
            style="width: 332rpx; height: 332rpx; display: block"
          ></image>
          <view class="ys-bar" v-if="item.is_ys == 1">
            {{ parseTime(item.ys_time) }} 开售
          </view>
        </view>
        <text class="goods_name">{{ item.goods_name }}</text>
        <view class="price">
          <view
            class=""
            style="display: flex; align-items: center"
            v-if="item.is_integral == 1"
          >
            <image
              style="width: 28rpx; height: 28rpx; margin-right: 10rpx"
              src="../../static/icon.png"
              mode=""
            ></image>
            <text
              style="font-size: 22rpx; line-height: 28rpx; color: #f75b5b"
              >{{ item.integral }}</text
            >
          </view>
          <text
            v-else
            style="font-size: 24rpx; color: #f75b5b; font-weight: 600"
            >￥{{ item.price }}</text
          >
          <view class="love">
            <uni-icons
              :type="item.is_sc == 0 ? 'heart' : 'heart-filled'"
              :color="item.is_sc == 1 ? '#EC5050' : ''"
              size="17"
              @tap.stop="hope(item.id)"
            ></uni-icons>
            <text style="font-size: 22rpx; padding-left: 8rpx; height: 34rpx">{{
              item.sc_num
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <Tabbar :current="0"></Tabbar>
  </view>
</template>

<style lang="scss" scoped>
  .updateMask {
    position: fixed;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // padding: 20rpx;
    background-image: linear-gradient(
      180deg,
      #f8ec8a,
      #f9ed8b,
      #ebf7da,
      #f9ede6,
      #f5f5f5 13%
    );

    .search-bar {
      width: 100%;
      height: 56rpx;
      margin-bottom: 22rpx;
      box-sizing: border-box;
      background: url('https://ojqn.wm2177.com/wechat_imgs/home-search.png')
        no-repeat;
      background-size: 100%;
    }

    .uni-swiper-dot-box {
      width: 100%;
    }

    .swiper-box {
      height: 570rpx;
    }

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 570rpx;
      color: #fff;
    }

    .swiper-item0 {
      background-color: #cee1fd;
    }

    .swiper-item1 {
      background-color: #b2cef7;
    }

    .swiper-item2 {
      background-color: #cee1fd;
    }

    // 商城分类
    .category {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      margin-top: 26rpx;
      padding: 0 38rpx;
      box-sizing: border-box;

      .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        text {
          font-size: 24rpx;
        }
      }
    }

    // 玩
    .play {
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      margin-top: 32rpx;
      .play-center-item {
        // box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
        width: 328rpx;
        height: 226rpx;
      }
      .play-item {
        box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
        width: 190rpx;
        height: 210rpx;
      }
    }

    // 功能
    // .charts {
    //   width: 100%;
    //   display: flex;
    //   justify-content: space-between;
    //   align-items: center;
    //   margin-top: 10rpx;

    // 商品
    .goodslist {
      width: 100%;
      margin-top: 16rpx;
      margin-bottom: 190rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 20rpx;
      box-sizing: border-box;

      .goodslist-item {
        box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 348rpx;
        height: 520rpx;
        padding-top: 8rpx;
        margin-bottom: 14rpx;
        border-radius: 8rpx;
        background: #fff;

        .ys-bar {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 50rpx;
          background-color: rgba(0, 0, 0, 0.5);
          color: white;
          font-size: 24rpx;
          line-height: 50rpx;
          text-align: center;
        }

        .goods_name {
          height: 90rpx;
          width: 100%;
          padding: 22rpx;
          font-size: 26rpx;

          font-weight: 600;
          text-align: left;
          box-sizing: border-box;
          color: #3d3d3d;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /* 限制为两行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          /* 隐藏超出部分 */
          text-overflow: ellipsis;
          /* 超出部分用省略号表示 */
          white-space: normal;
          /* 允许换行 */
          /* 你可能还想设置一些其他样式，比如宽度、字体大小等 */
        }
      }

      .price {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22rpx;
        box-sizing: border-box;

        .love {
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;
        }
      }
    }
  }

  // ///////
  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    height: 128rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    .bgColor1 {
      background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
    }
    .bgColor2 {
      background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
    }
    .bgColor3 {
      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
    }
    .bgColor4 {
      background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
    }
    .bgColor5 {
      background-image: linear-gradient(120deg, #ffb37d 0%, #f8f895 80%);
    }
    .bgColorWechact {
      background-image: linear-gradient(120deg, #66ffcc 0%, #f3f9ff 100%);
    }
    .charts-item {
      width: 248rpx;
      height: 126rpx;
      border-radius: 10rpx;
      display: flex;
      justify-content: space-between;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      // flex-direction: column;
      background-color: #fff;
      align-items: center;
      position: relative;

      text {
        margin-top: 12rpx;
        font-size: 24rpx;
        font-weight: 600;
      }
      // }
    }
  }
</style>
